<template>
    <div  class="purchaseAudit-container">
        <!-- 查询表单 -->
        <el-form :inline="true">
            <el-form-item>
                <el-autocomplete
                    v-model="searchObj.fpmid"
                    :trigger-on-focus="false"
                    class="inline-input"
                    placeholder="采购单号"
                    value-key="fpmid" />
            </el-form-item>
            <el-form-item>
                <el-autocomplete
                v-model="searchObj.fename"
                :trigger-on-focus="false"
                class="inline-input"
                placeholder="采购员"
                value-key="fename" />
            </el-form-item>
            <el-form-item>
                <el-select v-model="searchObj.fpmstatus" clearable placeholder="采购状态">
                    <el-option
                    v-for="item in status"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-date-picker
                v-model="searchObj.searchStartDate"
                type="date"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-date-picker
                v-model="searchObj.searchEndDate"
                type="date"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="-">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="fetchData()">查询</el-button>
                <el-button type="default" @click="resetData()">清空</el-button>
            </el-form-item>
        </el-form>
        <purchaseAuditinfo v-if="dialogFormVisible" :dialogFormVisible="dialogFormVisible"  :updateOrCreate="updateOrCreate" :editPurchaseOrder="editPurchaseOrder" />
        <!-- 表单部分 -->
        <el-table
            :data="purchaseOrderList"
            style="width: 100%"
        >
            <el-table-column
                prop="fpmid"
                label="采购单号"
                width="100"
                sortable
                />
            <el-table-column
                prop="fename"
                label="采购员"
                width="150"
                sortable
                />
            <el-table-column
                prop="fpname"
                label="供应商"
                width="100"
                sortable
                />
            <el-table-column
                prop="fwhname"
                label="采购仓库"
                width="200"
                sortable
                />
            <el-table-column
                prop="fpmdate"
                label="采购日期"
                width="100"
                :formatter="dateFormat"
                sortable
                />
            <el-table-column label="采购状态" width="100" prop="fpmstatus" sortable>
                <template slot-scope="scope">
                    <el-tag type="warning" effect="dark" v-if="scope.row.fpmstatus==0">审批中</el-tag>
                    <el-tag type="danger" effect="dark" v-else-if="scope.row.fpmstatus==1">审批通过</el-tag>
                    <el-tag type="danger" effect="dark" v-else-if="scope.row.fpmstatus==2">审批驳回</el-tag>
                    <el-tag type="danger" effect="dark" v-else-if="scope.row.fpmstatus==3">采购完成</el-tag>
                    <el-tag type="danger" effect="dark" v-else>审批中</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                prop="fpmmemo"
                label="备注"
                width="200"
                sortable
                />
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" size="big"  @click="vueEdit(scope.row)">审批</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[10, 50, 100, 200]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="200">
      </el-pagination>
    </div>
</template>
<script>
import moment from 'moment'
import { getPurchaseOrderList, deletePurchaseOrder } from '@/api/purchaseOrder'
import purchaseAuditinfo from '@/views/purchase/purchaseorder/audit/components/PurchaseAuditInfo'


export default {
    components: {
        purchaseAuditinfo
    },
    data () {
        return {
            purchaseOrderList: {},
            searchObj: {},
            dialogFormVisible: false,
            /*true 代表更新，false代表创建*/
            updateOrCreate: false,
            editPurchaseOrder: {},
            status: [{id: '0',name: '审批中'},{id: '1', name: '审批通过'},{id: '2',name:'审批驳回'},{id: '3',name:'采购完成'}]
            
        }
    },
    created() {
        this.fetchData()
    },
    methods: {
        // 事件格式化 利用momeent 模块 npm install moment
        dateFormat: function(row,column) {
            var date = row[column.property]
            if (date == undefined) {
                return ""
            }
            return moment(date).format("YYYY-MM-DD")
        },
        vueCreate() {
            this.dialogFormVisible=true
            this.updateOrCreate=false
        },
        vueEdit(row) {
            this.dialogFormVisible=true
            this.updateOrCreate=false
            this.editPurchaseOrder=row
        },
        vueReset() {
            this.dialogFormVisible=false
            this.updateOrCreate=false
            this.editPurchaseOrder={}
        },
        fetchData() {
            getPurchaseOrderList(this.searchObj).then(response => {
                this.purchaseOrderList = response.data.purchaseOrderList
            })
        },
        resetData() {
            this.searchObj = {}
        }
    }

}
</script>
<style lang="scss" scoped>
    .purchaseAudit-container {
      margin: 10px 50px 0;
      overflow: hidden;
    }
</style>